<template>
  <div class="">
    <van-nav-bar
        title="直播带货"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="live-shopping">
        <div class="shopping-box">
            <van-image
                    width="30"
                    height="30"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    />
            <div class="headerimg-name">
                    <span style="font-weight:900;">小胖主播</span>
                    <span><van-icon name="friends" size="20"/>1.5万</span>
            </div>
            <div class="live-radio">
                <video width="80" height="120" controls>
                    <source src="../video/aoteman.mp4" type="video/mp4">
                </video>
            </div>
            <p style="font-weight:900;">不一样的直播，给你的期待</p>
            <div class="live-data">
                <p>直播时间:08月13日</p>
                <div class="live-icon">
                    <van-icon name="link-o" size="20"/><span>分享</span>&nbsp;&nbsp;&nbsp;
                    <van-icon name="cart-o" size="20"/><span>购物车</span>
                </div>
            </div>
        </div>
      </div>
      
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
const onClickLeft = ()=>{
    router.push('/home')
}


</script>

<style scoped>
.live-data{
    display: flex;
    justify-content: space-between;
}
.live-radio{
    text-align: center;
}
.headerimg-name{
    display: flex;
    justify-content: space-between;

}
.headerimg-name span{
    display: inline-block;
}
.shopping-box{
    width: 85%;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top:32%;
    transform: translate(-50%,-50%);
    z-index: 1;
    padding: 10px;
    font-size: 14px;
    line-height: 15px;
    box-shadow: 0px 2px 10px 1px;
}
:deep(.van-nav-bar__content){
    background-color: #D93025;
    height: 100px;
    border-radius: 0 0 45px 45px;
}
:deep(.van-nav-bar__title ){
    font-weight: 900;
    color: #fff;
}
:deep(.van-nav-bar .van-icon){
    color: white;
}
</style>
